<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>基于vuejs的鼠标悬停动物显示和隐藏动画特效|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" /><!--CSS RESET-->
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><!--演示页面样式，使用时可以不引用-->
	<link rel="stylesheet" href="./style.css">
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">

			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Layout-Interface/201912095860.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<h1>MOCHISHIBA</h1>
<p class="sub">These loyal Shiba Inu are fully cute!</p>

<main id=app>
  
  <mochi-box shiba="ume" mood="happy" blush 
    left-eye="laugh" right-eye="laugh"
    left-ear="down" right-ear="down"> 
    <h2>うめ</h2>
    <h3>
      <a target="_blank" href="">Plum</a>
    </h3>
    <p class="shop kotobuki" title="kotobuki">ことぶき米店</p>
  </mochi-box>
  
  <mochi-box shiba="sesame" mood="drool" 
    left-ear="up" right-ear="up"> 
    <h2>ごま</h2>
    <h3>
      <a target="_blank" href="">Sesame</a>
    </h3>
    <p class="shop kotobuki" title="kotobuki">ことぶき米店</p>
  </mochi-box>

  <mochi-box shiba="tuna" mood="" 
    left-ear="up" right-ear="middle">
    <h2>つな</h2>
    <h3>
      <a target="_blank" href="">Tuna</a></h3> 
    <p class="shop kotobuki" title="kotobuki">ことぶき米店</p>
  </mochi-box>
  
  <mochi-box shiba="okaka" pop mood="excited"
    left-ear="up" right-ear="flat"> 
    <h2>おかか</h2>
    <h3>
      <a target="_blank" href="">Okaka</a></h3> 
    <p class="shop kotobuki" title="kotobuki">ことぶき米店</p>
  </mochi-box>
  
  <mochi-box shiba="random"> 
    <h2>おどろき</h2>
    <h3>Random</h3>
    <button>Randomize()</button>
  </mochi-box>
  
  <br>
  
  <mochi-box shiba="anko" mood="cheeky" 
    left-eye="open" right-eye="laugh"
    left-ear="flat" right-ear="middle"> 
    <h2>あんこ</h2>
    <h3>
      <a target="_blank" href="o">Sweet Bean</a>
    </h3>
    <p class="shop uemachi" title="uemachi">うえまち団子</p>
  </mochi-box>
  
  <mochi-box shiba="kinako" mood="gleam" blush 
    left-eye="open" right-eye="open"
    left-ear="middle" right-ear="middle"> 
    <h2>きなこ</h2>
    <h3>
      <a target="_blank" href="">Kiwi</a>
    </h3>
    <p class="shop uemachi" title="uemachi">うえまち団子</p>
  </mochi-box>
  
  <mochi-box shiba="sakura" mood="cute" blush 
    left-eye="shy" right-eye="open"
    left-ear="down" right-ear="middle"> 
    <h2>さくら</h2>
    <h3>
      <a target="_blank" href="">Sakura</a>
    </h3>
    <p class="shop uemachi" title="uemachi">うえまち団子</p>
  </mochi-box>
  
  <mochi-box shiba="monaka" mood="content" 
    left-eye="open" right-eye="wink"
    left-ear="middle" right-ear="flat"> 
    <h2>もなか</h2>
    <h3>
      <a target="_blank" href="">Monaka</a>
    </h3>
    <p class="shop uemachi" title="uemachi">うえまち団子</p>
  </mochi-box>
  
</main>

	</div>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js'></script>
	<script  src="./script.js"></script>
</body>
</html>